<template>
  <div class="flex items-center basic-copy">
    <div class="overflow-hidden overflow-ellipsis"><slot></slot></div>
    <basic-icon
      v-if="!disableCopy"
      name="copy"
      class="ml-1 cursor-pointer flex-shrink-0 text-[#595E70] hover:text-primary transition-colors"
      :size="iconSize"
      @click.stop="handleCopy"
    ></basic-icon>
  </div>
</template>

<script setup lang="ts">
// @ts-ignore
import { useClipboard } from '@vueuse/core'

interface IProps {
  content?: string
  iconSize?: string
  showIcon?: boolean
  disabled?: boolean
}

const props = withDefaults(defineProps<IProps>(), {
  iconSize: '16px',
  showIcon: false,
  disabled: false
})

const disableCopy = computed(() => {
  return props.disabled || !props.content
})

const { copy } = useClipboard({
  legacy: true
})
function handleCopy() {
  copy(props.content || '')
  ToastUtils.success(useI18nContent('common.toast.copy_success'))
}

const iconDisplay = computed(() => {
  return props.showIcon ? 'block' : 'none'
})
</script>

<style scoped lang="scss">
.basic-copy {
  @apply w-full;

  svg {
    display: v-bind(iconDisplay);
  }

  &:hover {
    svg {
      display: block !important;
    }
  }
}
</style>
